<template>
    <div @click="handleClick">
        <component
            class="component"
            :is="config.component"
            :style="getStyle(config.style)"
            :propValue="config.propValue"
            :element="config"
        />
    </div>
</template>

<script>
import { getStyle } from '@/utils/style';
import runAnimation from '@/utils/runAnimation';
import { mixins } from '@/utils/events';

export default {
    props: {
        config: {
            type: Object,
            require: true,
        },
    },
    mounted() {
        runAnimation(this.$el, this.config.animations);
    },
    mixins: [mixins],
    methods: {
        getStyle,

        handleClick() {
            const events = this.config.events;
            Object.keys(events).forEach((event) => {
                this[event](events[event]);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.component {
  position: absolute;
}
</style>
